<template>
    <div>
        <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-sizes="page_sizes"
            :page-size="per_age"
            layout="total, prev,pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // page_sizes: [25, 50],
            per_age: 25,
            current_page: 1
        }
    },

    props: {
        total: {
            type: Number,
            default: 0
        },
        page_sizes: {
            type: Array,
            default: function() {
                return [25, 50]
            },
        }
    },

    methods: {
        reset() {
            this.per_age = 25
            this.current_page = 1
        },
        handleSizeChange(size) {
            this.per_age = size
            let params = {
                perPage: this.per_age,
                page: this.current_page
            }
            this.$emit('paginationChange', params)
        },
        handleCurrentChange(page) {
            this.current_page = page
            let params = {
                perPage: this.per_age,
                page: this.current_page
            }
            this.$emit('paginationChange', params)
        }
    }
}
</script>
